<template>
    <div>
        <top></top>
        <div v-if="!isChoseType">
            <div v-show="isRecharge">
                <message></message>
                <div class="rechargeBox">
                    <div class="inputBox">
                        <div class="inputBoxTitle">请选择/输入充值金额</div>
                        <div class="inputBoxContent">
                            <input type="text" placeholder="请输入金额">
                            <div class="inputBoxContentBtn" @click="goRecharge">充&nbsp;值</div>
                        </div>
                    </div>
                    <div class="rechargeType">
                        <div class="rechargeTypeItem" v-for="(item,index) in priceType" :key="index">{{item.data}}元</div>
                    </div>
                </div>
                <div class="rechargeFooter">
                    <div class="rechargeFooteBtn" @click="goIndex">首&nbsp;页</div>
                </div>
            </div>
            <div v-show="isgoRecharge" class="diolog">
                <div v-if="isSure" class="diologBox">
                    <div class="diologBoxTop"><i @click="closeDiolog" class="iconfont icon-cha"></i></div>
                    <div style="clear:both;"></div>
                    <div class="diologBoxContent">
                        <div class="contentTitle">请再次确认个人信息</div>
                        <div class="contentName">王小姐</div>
                        <div class="contentCard">身份证信息：370481199401051832</div>
                    </div>
                    <div class="diologBoxBtn">
                        <div class="diologBoxBtnItem">信息有误</div>
                        <div class="diologBoxBtnItem" @click="sureRecharge">确认充值</div>
                    </div>
                </div>
                <div v-else class="diologBox typeDiologBox">
                    <div class="diologBoxTopType">
                        <div>请选择充值方式</div>
                        <div><i @click="closeDiolog" class="iconfont icon-cha"></i></div>
                    </div>
                    <div class="diologBoxImg">
                        <div class="diologBoxImgItem">
                            <img :src="zfbLogo" alt="">
                            <div class="diologBoxImgItemTitle">
                                支付宝
                            </div>
                        </div>
                        <div class="diologBoxImgItem">
                            <img :src="wxLogo" alt="">
                            <div class="diologBoxImgItemTitle">
                                微信
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import top from "../../components/top";
import zfbLogo from "../../assets/img/zfb.png";
import wxLogo from "../../assets/img/wx.png";
import message from "../../components/message";
export default {
    name:'recharge',
    components: {
        top,
        message
    },
    data(){
        return {
            priceType:[
                {
                    data:100
                },
                {
                    data:200
                },
                {
                    data:300
                },
                {
                    data:500
                },
                {
                    data:1000
                },
                {
                    data:2000
                },
            ],
            isRecharge: true,
            isSure: true,
            zfbLogo: zfbLogo,
            wxLogo: wxLogo,
            isgoRecharge: false,
            isChoseType: false,
        }
    },
    methods:{
        // 充值
        goRecharge(){
            this.isgoRecharge = true;
        },
        // 确认充值
        sureRecharge(){
            this.isSure = false;
        },
        // 关闭弹出框
        closeDiolog(){
            this.isgoRecharge = false;
            this.isSure = true;
        },
        // 返回首页
        goIndex() {
            this.$router.push({
                path:`/`
            })
        }
    }
}
</script>
<style>
.rechargeBox {
    padding: 0 2.5%;
}
.inputBox {
    padding-top: 4px;
}
.inputBoxContent input{  
	background:none;  
	outline:none;  
	border:1px solid #b9b9b9;
    width: 85%;
    height: 40px;
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 18px;
}
.inputBoxContent input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #aab2bd;
    /* placeholder字体大小  */
    font-size: 16px;
}
.inputBoxTitle {
    font-size: 20px;
    line-height: 36px;
    color: #5f5f5f;
}
.inputBoxContent {
   display: flex; 
   align-items: center;
   justify-content: center;
   justify-content:space-between;
}
.inputBoxContentBtn {
    width: 100px;
    font-size: 20px;
    line-height: 40px;
    color: #ffffff;
    background-color: #ffa600;
    text-align: center;
    border-radius: 5px;
}
.rechargeType {
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-wrap:wrap;
}
.rechargeTypeItem {
    width: 25%;
    font-size: 45px;
    color: #36c3ca;
    border: 1px solid #36c3ca;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    padding: 20px 0;
}
.rechargeTypeItem:nth-child(2),.rechargeTypeItem:nth-child(5){
    margin: 0 12.5%;
}
.rechargeTypeItem:nth-child(1),
.rechargeTypeItem:nth-child(2),
.rechargeTypeItem:nth-child(3){
    margin-bottom: 20px;
}
.rechargeFooter {
    position: fixed;
    right: 0;
    bottom: 0;
}
.rechargeFooteBtn {
    color: #ffffff;
    width: 180px;
    height: 80px;
    background-color: #36c3ca;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diolog {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.diologBox {
    background-color: #ffffff;
    border-radius: 5px;
    margin-top: -70px;
}
.typeDiologBox {
    margin-top: -150px;
}
.diologBoxTop {
    float: right;
    padding: 10px;
    
}
.diologBoxTopType {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 10px;
    font-size: 20px;
}
.diologBoxImgItemTitle {
    text-align: center;
    margin-top: 10px;
}
.diologBoxImg {
    display: flex;
    padding: 70px 90px 60px 90px;
}
.diologBoxImgItem:nth-child(1) {
    margin-right: 40px;
}
.diologBoxImgItem:nth-child(2) {
    margin-left: 40px;
}
.diologBoxImgItem img {
    width: 120px;
    height: 120px;
    border-radius: 15px;
}
.icon-cha {
    font-size: 24px !important;
    color: #e6e6e6;
}
.diologBoxContent {
    text-align: center;
}
.diologBoxBtn {
    display: flex;
    border-top: 1px solid #eeeeee;
    box-sizing: border-box;
}
.diologBoxBtnItem {
    width: 50%;
    text-align: center;
    padding: 15px 50px;
}
.diologBoxBtnItem:nth-child(2) {
    background-color: #ffa600;
    color: #ffffff;
    border-bottom-right-radius: 5px;
}
.contentTitle {
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 36px;
}
.contentName {
    font-size: 26px;
    line-height: 52px;
    margin-bottom: 5px;
}
.contentCard {
    font-size: 16px;
    line-height: 32px;
    color: #cccccc;
    margin-bottom: 20px;
}
</style>

